import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import PxToDp from '../../utils/PxToDp';
import FontFamilys from '../../utils/FontFamilys';
import { fetchImportOVerview } from '../../actions/ImportOverviewAction';
import Loading from '../Public/Loading';
import SourceHighchart from './SourceHighchart';

const isLoading = true;

class ImportOverview extends Component {
  componentDidMount() {
    this.props.dispatch(fetchImportOVerview(isLoading));
  }
  render() {
    const importOVerviewData = this.props.importOVerviewData;
    let totalUsersNum = '';
    let vrNum = '';
    let mrate = '';
    let wrate = '';
    let channelRate = []; // 客户来源占比
    let AppRate = '';
    let WebRate = '';
    let PCVRrate = '';
    let LedRate = '';
    let H5Rate = '';
    let DriverRate = '';
    let dealerCar = [];  // 车系偏好
    const dealerCarNew = []; // 车系偏好改变格式，添加id

    if (importOVerviewData) {
      totalUsersNum = importOVerviewData.total_users_num;
      vrNum = importOVerviewData.vr_num;
      mrate = importOVerviewData.mrate;
      wrate = importOVerviewData.wrate;
      channelRate = importOVerviewData.channel_rate;
      if (channelRate && channelRate.length > 0) {
        channelRate.map((data) => {
          if (data[1] === '移动数字经销店') {
            AppRate = data[0];
          } else if (data[1] === '触控可视化') {
            LedRate = data[0];
          } else if (data[1] === '虚拟驾驶模拟') {
            DriverRate = data[0];
          } else if (data[1] === '微车商') {
            H5Rate = data[0];
          } else if (data[1] === '官网') {
            WebRate = data[0];
          } else {
            PCVRrate = data[0];
          }
        });
      }
      dealerCar = importOVerviewData.car_list;
      let Obj = { id: '', num: 0, name: '', carId: '' }; // 车系偏好对象
      if (dealerCar && dealerCar.length > 0) {
        dealerCar.map((data, i) => {
          Obj = { id: '', num: 0, name: '', carId: '' }; // 车系偏好对象
          Obj.id = i;
          Obj.num = data[0];
          Obj.name = data[1];
          Obj.carId = data[2];
          dealerCarNew.push(Obj);
        });
      }
    }
    return (
      <View style={[style.wrapper]}>
        {
          this.props.importLoading
          ?
            <View style={style.load}>
              <Loading />
            </View>
          :
            <ScrollView>
              <View style={[style.hLine, style.lineTop]} />
              <View style={style.allCon}>
                <Text style={style.titleText}>总览信息</Text>
                <View style={style.row}>
                  <LinearGradient
                    colors={['#7b6aff', '#4cbbff']}
                    style={[style.liner, style.flex, style.leftLiner]}
                    start={{ x: 0, y: 1 }}
                    end={{ x: 1, y: 1 }}
                  >
                    <Image style={style.allIcon} source={require('../../img/home/daNum1.png')} />
                    <Text style={[style.topNumText, style.allText]}>
                      {totalUsersNum || '--' }
                    </Text>
                    <Text style={style.topTip}>
                      客户总数
                    </Text>
                  </LinearGradient>

                  <LinearGradient
                    colors={['#7b6aff', '#4cbbff']}
                    style={[style.liner, style.flex, style.leftLiner]}
                    start={{ x: 0, y: 1 }}
                    end={{ x: 1, y: 1 }}
                  >
                    <Image style={style.vrIcon} source={require('../../img/home/daVr.png')} />
                    <Text style={[style.topNumText, style.allText]}>
                      {vrNum || '--'}
                    </Text>
                    <Text style={style.topTip}>
                        当前通话客户
                    </Text>
                  </LinearGradient>

                  <LinearGradient
                    colors={['#7b6aff', '#4cbbff']}
                    style={[style.liner, style.flex]}
                    start={{ x: 0, y: 1 }}
                    end={{ x: 1, y: 1 }}
                  >
                    <Image style={style.allIcon} source={require('../../img/home/daSex.png')} />
                    <Text style={[style.topNumText, style.allText]}>
                      {mrate || '--'} / {wrate || '--'}
                    </Text>
                    <Text style={style.topTip}>
                      男女占比
                    </Text>
                  </LinearGradient>
                </View>
              </View>
              <View style={style.hLine} />

              <View style={[style.hLine, style.lineTop]} />
              <View style={[style.scaleMsg, style.allCon]}>
                <Text style={style.titleText} >客户来源占比</Text>

                <View style={[style.row, style.sourceOne]}>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={AppRate}
                      />
                      <View style={style.highImgV}>
                        <Image style={style.highImg} source={require('../../img/home/data-source-pcvr.png')} />
                      </View>

                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>移动数字经销店</Text>
                      <Text style={style.textNum}> {AppRate}% </Text>
                    </View>
                  </View>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={PCVRrate}
                      />
                      <View style={{ justifyContent: 'center', paddingTop: 1 }}>
                        <Image style={style.highImg} source={require('../../img/home/daSPhone.png')} />
                      </View>

                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>AR数字展厅</Text>
                      <Text style={style.textNum}>{PCVRrate}%</Text>
                    </View>
                  </View>
                </View>

                <View style={[style.row, style.sourceOne]}>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={LedRate}
                      />
                      <View style={style.highImgV}>
                        <Image style={style.highImg} source={require('../../img/home/data-source-led.png')} />
                      </View>
                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>触控可视化</Text>
                      <Text style={style.textNum}>{LedRate}%</Text>
                    </View>
                  </View>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={DriverRate}
                      />
                      <View style={style.highImgV}>
                        <Image style={style.highImg} source={require('../../img/home/data-source-driver.png')} />
                      </View>
                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>虚拟驾驶模拟</Text>
                      <Text style={style.textNum}>{DriverRate}%</Text>
                    </View>
                  </View>
                </View>

                <View style={[style.row, style.sourceOne]}>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={WebRate}
                      />
                      <View style={style.highImgV}>
                        <Image style={style.highImg} source={require('../../img/home/data-source-bigled.png')} />
                      </View>
                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>官网</Text>
                      <Text style={style.textNum}>{WebRate}%</Text>
                    </View>
                  </View>
                  <View style={[style.flex, style.row]}>
                    <View style={[style.highchart, style.row]}>
                      <SourceHighchart
                        total={''}
                        intent90={H5Rate}
                      />
                      <View style={style.highImgV}>
                        <Image style={style.highImg} source={require('../../img/home/data-source-chats.png')} />
                      </View>
                    </View>
                    <View style={style.sourceText}>
                      <Text style={style.sourceName}>微车商</Text>
                      <Text style={style.textNum}>{H5Rate}%</Text>
                    </View>
                  </View>
                </View>
              </View>
              <View style={style.hLine} />

              <View style={[style.hLine, style.lineTop]} />
              <View style={[style.bottom, style.allCon]}>
                <View style={style.row}>
                  <Text style={style.titleText}>车系偏好信息</Text>
                  <Text style={style.sourceTip}>
                    (根据客户看车总人数统计）
                  </Text>
                </View>
                {dealerCarNew.map(data => (
                  <View
                    style={style.car}
                    key={`${data.id}-${Math.random(1000000)}`}
                  >
                    <View style={[style.row, style.bottomMsg]}>
                      <Text style={[style.textNum]}>{data.name}</Text>
                      <Text style={[style.textNum]}>
                        {data.num}%
                      </Text>
                    </View>
                    <View style={[style.flex, style.progressbar]}>
                      <View style={{ height: 8, flexDirection: 'row', backgroundColor: '#e7eeea' }}>
                        <View style={{ flex: data.num, backgroundColor: '#f65252' }} />
                        <View style={{ flex: 100 - data.num, backgroundColor: '#e7eeea' }} />
                      </View>
                    </View>
                  </View>
              ))}
              </View>
              <View style={style.hLine} />

            </ScrollView>
        }
      </View>

    );
  }
}

const style = StyleSheet.create({
  wrapper: {
    backgroundColor: '#F9F9F9',
  },
  flex: {
    flex: 1,
  },
  row: {
    flexDirection: 'row',
  },
  bottomMsg: {
    justifyContent: 'space-between',
  },
  progressbar: {
    paddingTop: PxToDp(6),
  },
  car: {
    marginTop: PxToDp(30),
  },
  titleText: {
    fontSize: PxToDp(18),
    color: '#121212',
    fontFamily: FontFamilys(),
  },
  scaleMsg: {
    backgroundColor: 'red',
  },
  bottom: {
    backgroundColor: 'blue',
  },
  allCon: {
    backgroundColor: '#fff',
    paddingTop: PxToDp(20),
    paddingLeft: PxToDp(20),
    paddingRight: PxToDp(20),
    paddingBottom: PxToDp(20),
  },
  liner: {
    height: PxToDp(123),
    alignItems: 'center',
    width: '100%',
    marginTop: PxToDp(20),
  },
  topNumText: {
    fontWeight: 'bold',
    color: '#ffffff',
    fontSize: PxToDp(20),
    backgroundColor: 'transparent',
    fontFamily: FontFamilys(),
  },
  topTip: {
    color: '#c4d2ff',
    fontSize: PxToDp(12),
    backgroundColor: 'transparent',
    marginTop: PxToDp(8),
  },
  leftLiner: {
    marginRight: PxToDp(10),
  },
  allIcon: {
    marginTop: PxToDp(18),
  },
  vrIcon: {
    marginTop: PxToDp(18),
  },
  allText: {
    marginTop: PxToDp(20),
  },
  sourceTip: {
    fontFamily: FontFamilys(),
    fontSize: PxToDp(14),
    color: '#d9dadd',
    marginLeft: PxToDp(18),
    marginTop: PxToDp(4),
  },
  textNum: {
    color: '#8b8c8e',
    fontSize: PxToDp(13),
  },
  highchart: {
    overflow: 'hidden',
  },
  highImgV: {
    justifyContent: 'center',
    paddingTop: PxToDp(1),
  },
  highImg: {
    marginLeft: PxToDp(-33),
  },
  sourceOne: {
    marginTop: PxToDp(20),
  },
  sourceText: {
    marginTop: PxToDp(5),
  },
  sourceName: {
    fontSize: PxToDp(14),
    color: '#121212',
    marginTop: PxToDp(2),
  },
  load: {
    height: PxToDp(500),
    alignItems: 'center',
    justifyContent: 'center',
  },
  hLine: {
    width: '100%',
    height: PxToDp(0.5),
    backgroundColor: '#e4e4e4',
  },
  lineTop: {
    marginTop: PxToDp(10),
  },
});
export default ImportOverview;
